<template>
	<view class="welfare-container">
		<view class="header">
			<image
				class="logo"
				src="https://ciyu-edu.oss-cn-beijing.aliyuncs.com/pic/logo.png"
				mode="aspectFit" />
			<text class="title">A*俱乐部</text>
		</view>
		<view class="content">
			<view class="intro-section">
				<view class="group">
					<view class="title">群组</view>
					<view class="paragraph mb-24">
						爱德思考试局的宝子们可以扫码进群，互帮互助 <br />
						分享学习资料，讨论升学规划，找搭子~（仅限国高生，广告勿扰）
					</view>
					<image
						src="https://ciyu-edu.oss-cn-beijing.aliyuncs.com/pic/group.png"
						mode="aspectFit"
						show-menu-by-longpress />
				</view>

				<view class="split-line"></view>

				<!-- 扩列区域  -->
				<view class="social">
					<view class="title">扩列专区</view>

					<view class="p1">
						<view class="paragraph">
							G10 坐标南京 <br />
              选科：数学+进阶数学+物理+经济<br />
							申请方向：香港，传媒方向<br />
							第五人格玩家~
						</view>
						<image
							src="https://ciyu-edu.oss-cn-beijing.aliyuncs.com/pic/p1.png"
							show-menu-by-longpress
							mode="aspectFit" />
					</view>
					<view class="p2">
						<view class="paragraph">
							G10 坐标南京<br />
							选科：数学+进阶数学+经济+心理<br />
							申请方向：英国，心理方向<br />
							找同样学心理的搭子~
						</view>
						<image
							src="https://ciyu-edu.oss-cn-beijing.aliyuncs.com/pic/p2.png"
							show-menu-by-longpress
							mode="aspectFit" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineExpose } from 'vue'

// 分享给朋友
const onShareAppMessage = () => {
	return {
		title: '爱德思题库',
		path: '/pages/welfare/welfare',
		imageUrl: '/static/images/logo.png'
	}
}

// 分享到朋友圈
const onShareTimeline = () => {
	return {
		title: '爱德思题库',
		path: '/pages/welfare/welfare',
		imageUrl: '/static/images/logo.png'
	}
}

defineExpose({
	onShareAppMessage,
	onShareTimeline
})
</script>

<style lang="scss" scoped>
@import '/static/fonts/Tanugo/stylesheet.scss';

.welfare-container {
	font-family: 'Tanugo';
	height: 100vh;
	background: #f8f8f8;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.header {
		text-align: left;
		padding: 40rpx 0;
		background: linear-gradient(
			to right,
			rgb(43, 192, 228),
			rgb(234, 236, 198)
		);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {
			width: 160rpx;
			height: 160rpx;
			margin-left: 32rpx;
			margin-right: auto;
			transform: translate(0, 32rpx);
		}

		.title {
			font-size: 40rpx;
			font-weight: 600;
			color: #fff;
			transform: translate(-218rpx, 32rpx);
		}
	}

	.content {
		flex: 1;
		overflow: auto;
		padding: 32rpx;
		.hide {
			display: none;
		}

		.intro-section {
			background: #fff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.title {
				font-weight: 500;
				color: #000;
				margin-bottom: 24rpx;
			}
			.mb-24 {
				margin-bottom: 24rpx;
			}

			.paragraph {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				text-align: justify;
			}
			.split-line {
				margin: 24rpx 0;
				width: 100%;
				height: 4rpx;
				background: #f5f5f5;
			}
		}
	}
}
</style>
